import { message, Modal } from 'ant-design-vue';
import { Component, createVNode, h, markRaw, createApp,nextTick, VNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { ModalFuncProps } from 'ant-design-vue/lib/modal';
message.config({
  duration: 3, //3秒
  maxCount: 3,
});
const $success = message.success;
const $error = message.error;
const $confirm = (msg: string | VNode, onOk?: (...args: any[]) => any, onCancel?: (...args: any[]) => any) => {
  Modal.confirm({
    content: msg,
    icon: createVNode(ExclamationCircleOutlined),
    onOk,
    onCancel,
  });
};
interface DialogOption {
  component: Component;
  dialogOpt: ModalFuncProps;
  props?: any;
}
const $pop = (opt: DialogOption) => {
  let modal= Modal.confirm({
    content: h(opt.component, opt.props),
    centered: true,
    closable: true,
    mask: true,
    maskClosable: false,
    class: 'dialog-wrap',
    ...opt.dialogOpt,
  });
  return {
    close() {
      modal.destroy()
    },
  };
};
const $dialog = (opt: DialogOption) => {
  const div = document.createElement('div');
  document.body.append(div);
  
  //赋初始的值
  opt.dialogOpt = Object.assign(
    {
      visible:true,
      centered: true,
      closable: true,
      mask: true,
      maskClosable: false,
      class: 'dialog-wrap',
      ref:"dlgRef"
    },
    opt.dialogOpt
  );
  let refs:any={};
  let app = createApp({
    render() {
      opt.props.ref="inner"
      return h(Modal, opt.dialogOpt, [h(opt.component, opt.props)]);
    },
    mounted(){
      nextTick(()=>{
        refs.inner=this.$refs.inner
        refs.dlgRef=this.$refs.dlgRef
      })
    }
  });
  app.mount(div);
  return {
    refs,  
    close() {
        app.unmount();
        document.body.removeChild(div);
    },
  };
};

export { $success, $error, $confirm, $dialog,$pop  };
